<!DOCTYPE html>
<html lang="en">
{% load static %}
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin Dashboard</title>
    <!-- Bootstrap 5 CSS -->
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
    <!-- 导入本地的bootstrap-icons.css：Bootstrap Icons -->
    <link rel="stylesheet" href="{% static 'css/bootstrap-icons.css' %}">

    <!-- Custom CSS -->
    <link rel="stylesheet" href="{% static 'css/menu.css' %}">
    <!-- 导入本地的Vue 3 -->
    <script src="{% static 'js/vue.global.js' %}"></script>
    <!-- 导入本地的axios -->
    <script src="{% static 'js/axios.min.js' %}"></script>
    <!--导入本地的bootstrap.bundle.min.js-->
    <script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>
</head>
<body>
  {% verbatim %} <!-- 添加此行 -->
    <div id="app"></div>
    <!-- Bootstrap 5 JS Bundle -->

    <script>
        const { createApp,reactive,onMounted } = Vue;
        
        const menuData = [
            {
                id: 1,
                title: '首页',
                icon: 'bi-database-fill',

            },
            {
                id: 2,
                title: '办公工具',
                icon: 'bi-gear',
                url: '#',
                children: [
                    {
                        id: 21,
                        title: '网页抓取',
                        icon: 'bi-file-earmark-code',
                        url: 'http://localhost/chatbot/6zDhxuxdrYvz5zEF'
                    },

                    {
                        id: 22,
                        title: '钉钉机器人',
                        icon: 'bi-file-earmark-code',
                        url: 'http://localhost/chat/gCJ6dn50L1G6FFgf'
                    },
                     {
                        id: 23,
                        title: '微信机器人',
                        icon: 'bi-file-earmark-code',
                        url: 'http://localhost/chat/t7XPkvp2zbG737lf'
                    }

                ]
            },
            {
                id: 3,
                title: '聊天助手',
                icon: 'bi-code-square',
                children: [
                    {
                        id: 31,
                        title: 'HR机器人',
                        icon: 'bi-file-earmark-code',
                        url: 'http://localhost/chat/iZXHgZ5wppp6sg9y'
                    },
                    {
                        id: 32,
                        title: '翻译专家',
                        icon: 'bi-file-earmark-code',
                        url: 'http://localhost/chat/HnkrwtAxrNMfCsx4'
                    },
                    {
                        id: 33,
                        title: '文本翻译',
                        icon: 'bi-file-earmark-code',
                        url: 'http://localhost/completion/qsNpk0g1usDDb92G'
                    }
                ]
            },
            {
                id: 4,
                title: '微电商',
                icon: 'bi-cart',
                 children: [
                    {
                        id: 41,
                        title: '文本生sql',
                        icon: 'bi-file-earmark-code',
                        url: 'http://localhost/chat/V75hgvM7yvYAOCWw'
                    },
                    {
                        id: 42,
                        title: '销售查询',
                        icon: 'bi-file-earmark-code',
                        url: 'http://localhost/chat/8i399yJEMfe3OfcX'
                    },
                    {
                        id: 43,
                        title: '数据报表',
                        icon: 'bi-file-earmark-code',
                        url: 'http://localhost/chat/mply5p3QWokhMkM8'
                    }
                ]
            },
            {
                id: 5,
                title: '发票识别',
                icon: 'bi-gear-fill',
                children: [
                    {
                        id: 41,
                        title: '发票识别',
                        icon: 'bi-file-earmark-code',
                        url: 'http://localhost/chat/Q9CP0RpzbhI0JDhH'
                    },
                    {
                        id: 42,
                        title: '发票表格',
                        icon: 'bi-file-earmark-code',
                        url: 'http://localhost/chat/z7ZKwyO0RZTLF08A'
                    },
                    {
                        id: 43,
                        title: '发票入库',
                        icon: 'bi-file-earmark-code',
                        url: 'http://localhost/chat/1mLXtY3ctsaRYUMO'
                    }
                ]
            },
            {
                id: 6,
                title: '系统工具',
                icon: 'bi-gear-fill',
                     children: [
                    {
                        id: 41,
                        title: '文本生图',
                        icon: 'bi-file-earmark-code',
                        url: 'http://localhost/chat/Q9CP0RpzbhI0JDhH'
                    },
                    {
                        id: 42,
                        title: '文生语音',
                        icon: 'bi-file-earmark-code',
                        url: 'http://localhost/chat/z7ZKwyO0RZTLF08A'
                    },
                    {
                        id: 43,
                        title: '文生sql',
                        icon: 'bi-file-earmark-code',
                        url: 'http://localhost/chat/1mLXtY3ctsaRYUMO'
                    },
                    {
                        id: 43,
                        title: '代码解释',
                        icon: 'bi-file-earmark-code',
                        url: 'http://localhost/chat/1mLXtY3ctsaRYUMO'
                    },
                    {
                        id: 43,
                        title: '代码解释',
                        icon: 'bi-file-earmark-code',
                        url: 'http://localhost/chat/1mLXtY3ctsaRYUMO'
                    }
                ]
            }
        ];

        const app = createApp({

            data() {
                return {
                    isCollapsed: false,
                    menuItems: menuData,
                    currentUrl: '/blog/to_main/',
                    expandedItems: new Set(),
                    activeHoverMenu: null,
                    currentPath: ['首页']
                }
            },
            methods: {
                toggleSidebar() {
                    this.isCollapsed = !this.isCollapsed;
                },
                toggleSubmenu(itemId) {
                    if (this.expandedItems.has(itemId)) {
                        this.expandedItems.delete(itemId);
                    } else {
                        this.expandedItems.add(itemId);
                    }
                },
                isExpanded(itemId) {
                    return this.expandedItems.has(itemId);
                },
                navigateTo(url, parentTitle, itemTitle) {
                    if (url) {
                        this.currentUrl = url;
                        this.activeHoverMenu = null;
                        if (parentTitle) {
                            this.currentPath = [parentTitle, itemTitle];
                        } else {
                            this.currentPath = [itemTitle];
                        }
                    }
                },
                handleMouseEnter(itemId) {
                    if (this.isCollapsed) {
                        this.activeHoverMenu = itemId;
                    }
                },
                handleMouseLeave() {
                    this.activeHoverMenu = null;
                }
            },
            template: `
                <div class="admin-wrapper">
                    <nav :class="['sidebar', { collapsed: isCollapsed }]">
                        <div class="sidebar-header">
                            <a href="#" class="sidebar-brand">
                                <i class="bi bi-code-slash me-2"></i>
                                <span>X智能体</span>
                            </a>
                            <div class="menu-toggle" @click="toggleSidebar">
                                <i class="bi" :class="isCollapsed ? 'bi-chevron-right' : 'bi-chevron-left'"></i>
                            </div>
                        </div>
                        <div class="sidebar-menu">
                            <ul class="nav flex-column">
                                <li class="nav-item" 
                                    v-for="item in menuItems" 
                                    :key="item.id"
                                    @mouseenter="handleMouseEnter(item.id)"
                                    @mouseleave="handleMouseLeave">
                                    <a class="nav-link" 
                                       href="#" 
                                       @click.prevent="item.children ? (isCollapsed ? null : toggleSubmenu(item.id)) : navigateTo(item.url, null, item.title)">
                                        <i class="bi" :class="item.icon"></i>
                                        <span v-text="item.title"></span>
                                        <i v-if="item.children && !isCollapsed" 
                                           class="bi arrow" 
                                           :class="[isExpanded(item.id) ? 'bi-chevron-up rotated' : 'bi-chevron-down']">
                                        </i>
                                    </a>
                                    <div v-if="item.children && isCollapsed && activeHoverMenu === item.id" 
                                         class="hover-menu">
                                        <div class="menu-title">
                                            <i class="bi" :class="item.icon"></i>
                                            <span v-text="item.title"></span>
                                        </div>
                                        <a v-for="child in item.children"
                                           :key="child.id"
                                           class="nav-link"
                                           href="#"
                                           @click.prevent="navigateTo(child.url, item.title, child.title)">
                                            <i class="bi" :class="child.icon"></i>
                                            <span v-text="child.title"></span>
                                        </a>
                                    </div>
                                    <div v-if="item.children && !isCollapsed" 
                                         class="submenu"
                                         :class="{ show: isExpanded(item.id) }">
                                        <a v-for="child in item.children"
                                           :key="child.id"
                                           class="nav-link"
                                           href="#"
                                           @click.prevent="navigateTo(child.url, item.title, child.title)">
                                            <i class="bi" :class="child.icon"></i>
                                            <span v-text="child.title"></span>
                                        </a>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </nav>
                    <main :class="['main-content', { expanded: isCollapsed }]">
                        <div class="breadcrumb-wrapper">
                            <nav aria-label="breadcrumb">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-prefix">位置：</li>
                                    <li v-for="(item, index) in currentPath" 
                                        :key="index" 
                                        class="breadcrumb-item"
                                        :class="{ active: index === currentPath.length - 1 }">
                                        <span v-text="item"></span>
                                    </li>
                                </ol>
                            </nav>
                        </div>
                        <!-- 嵌套dify iframe -->
                        <iframe v-if="currentUrl"
                                :src="currentUrl"
                                class="content-frame"
                                frameborder="0">
                        </iframe>
                    </main>
                </div>
            `
        });

        app.mount('#app');
    </script>
</body>
  {% endverbatim %} <!-- 添加此行 -->


</html>